    *{
        font-family: 'Microsoft YaHei';
        margin:0px;
        padding:0px;
    }
    .navigation-box{
        background-color: rgb(51, 51,51);
        display:flex;
        justify-content: center; /* 将子元素在主轴上居中对齐 */
        align-items: center; /* 将子元素在交叉轴上居中对齐 */
    }
    .navigation-nav ul{
        height:53px;
        width: 1240px;
        list-style: none;
        display:flex;
        justify-content:flex-end; /* 将主轴上的子元素推到末尾 */
        align-items:center;
    }
    .navigation-nav ul li a{
        text-decoration: none;
        color:#dcdcdc;
    }
    /* 设置导航栏中链接在悬停状态下的文本颜色为指定的绿色 */
    .navigation-nav ul li a:hover{
        color:#27ba9b;
    }
    .navigation-nav li {
        display: inline-block; /* 将li元素设置为inline-block，以便能够设置左右间距 */
        margin-right: 40px; /* 设置右边距，可以根据需要调整间距 */
        position: relative; /* 设置position为相对定位以便子元素绝对定位 */
    }
    .navigation-nav li:not(:last-child)::after {
        content: '|'; /* 在每个li元素之后添加一个“|”字符 */
        position: absolute; /* 分隔符绝对定位 */
        /* 调整分隔符的位置，使其位于li元素的右边距中间 */
        right: -20px; 
        color: rgb(102,102,102); /* 设置分隔符的颜色 */
    }
    .phone-img{
        display: inline-block; /* 确保图片和文字在同一行 */
        vertical-align: middle; /* 垂直居中对齐图片和文字 */
        width: 30px;
        height: 30px;
        /* 设置背景图片为精灵图 */
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        /* 设置背景图像的位置 */
        background-position:250px -63px;
    }

    .search-nav ul{
        height:132px;
        width: 1240px;
        list-style: none;
        display:flex;
        justify-content: space-between;
        align-items:center;
        margin:0px auto;    
    }
    .search-nav ul li a{
        color:black;
        text-decoration: none;
        font-weight: bold;
        margin:20px ;
    }
    .shopping-cart {
        position: relative;
        float: right;
        width:40px;
        height: 40px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:290px -60px;
    }
    /* 伪元素，用于在 .shopping-cart 元素之后添加内容或样式 */
    .shopping-cart::after {
        content: '2'; /* 这里放置你想要显示的数字 */
        position: absolute; /* 使用绝对定位来调整角标的位置 */
        top: 0px;
        left: 20px;
        background-color: red; /* 设置角标的背景颜色为红色 */
        color: white; /* 设置角标文字的颜色为白色 */
        border-radius: 50%; /* 使角标变成圆形 */
        padding: 0px 5px; /* 为数字角标添加一些内边距 */
        font-size: 15px; /* 调整数字角标的字体大小 */
    }
    .search-container{
        display: flex;
        align-items: center;
        margin-left: 15px;
    }
    .search-input {
        border: none; /* 去掉输入框的边框 */
        outline: none; /* 防止焦点时出现边框 */
        background: transparent; /* 背景透明，只显示描边线 */
        flex: 1; /* 输入框占据剩余空间 */
        font-size: 16px;
        padding: 5px 0; /* 输入框的内边距 */
    }
    .glass-img{
        display: block;
        width: 30px;
        height: 30px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:325px -60px;
    }

    .box1{
        height:500px;
        background-color: rgb(245,245, 245);
    }
    .box1 >.wrapper{
        background-image: url("./实验2-小兔鲜儿所用图片/banner_1.png");
        margin:0px auto;
        width:1240px;
        height: 500px;
    }
    .aside ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
        height:500px;
    }
    .aside li{
        display: flex;
        align-items: center;
        background-color: rgba(17, 6, 6, 0.85);
        width: 250px;
        height: 50px;
        position:relative;
    }
    .aside a{
        margin-left: 40px;
        font-size: 16px;
        text-decoration: none;
        color:white;
    }
    .aside span{
        color:white;
        font-size: 14px;
        padding-left: 15px;
        font-weight: 400;
    }
    .aside-img{
        display: block;
        width: 30px;
        height: 30px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position: 5px -100px;
        position:absolute;
        right:-15px;
    }
    /* 当鼠标悬停在 .aside 类下的 li 元素上时，
    改变背景颜色为指定的 rgba 值 */
    .aside li:hover{
        background-color: rgba(39, 186, 155);
    }

    .box2{
        height:519px;
    }
    .box2 > .wrapper{
        height:519px;
        width: 1240px;
        margin:0px auto;/*居中*/
        display:flex;
        flex-direction: column;/*使head和img-box在垂直方向上排列*/
    }
    .box2 > .wrapper > .head{
        height: 114px;
        width: 1240px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box2 > .wrapper > .head h2 span{
        font-size: 16px;
        color: #999;
    }
    .box2 > .wrapper > .head a{
        color: #999;
        font-size: 16px;
        text-decoration: none;
    }
    .box2 > .wrapper > .img-box{
        transition: transform 0.6s ease;
        height: 405px;
        width: 1240px;
    }
    .box2 > .wrapper > .img-box ul{
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box2 > .wrapper > .img-box ul li h3{
        font-size:22px;
        text-align: center;
        padding: 12px 30px 0 30px;
    }
    .box2 > .wrapper > .img-box ul li span{
        font-size:23px;
        display: flex;
        justify-content: center;
        color: #9A2E1F;;
        margin-top: 10px;
    }
    .box2 > .wrapper > .img-box img{
        height: 304px;
        width: 304px;
    }
    .box2 > .wrapper > .img-box li{
        background-color: rgb(240,249, 244);
        position: relative;
        overflow: hidden; /* 隐藏超出容器的内容 */
        border-radius: 12px; /* 添加圆角 */
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
        /* 新增基础阴影 */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .box2 > .wrapper > .img-box li .content-wrapper {
        transition: inherit; /* 继承父级过渡效果 */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    /* 悬停时整体变形 */
    .box2 > .wrapper > .img-box li:hover {
        transform: translateY(-15px) scale(1.03); /* 整体上浮放大 */
        z-index: 2; /* 提升层级防止遮挡 */
        z-index: 2;
        /* 新增多层阴影 */
        box-shadow: 
        0 12px 25px rgba(0,0,0,0.2),
        0 8px 15px rgba(0,0,0,0.1);
    }
    /* 内容容器跟随变形 */
    .box2 > .wrapper > .img-box li:hover .content-wrapper {
        transform: translateY(-5px); /* 内容额外上移增强层次 */
    }
    /* 图片同步变化 */
    .box2 > .wrapper >.img-box li:hover img {
        transform: scale(1.08); /* 图片放大 */
        filter: brightness(1.05); /* 亮度增强 */
    }
    /* 文字颜色变化 */
    /* .box2 > .wrapper > .img-box li:hover h3 {
        color: #e74c3c;
        }
    .box2 > .wrapper > .img-box li:hover span {
        color: #2ecc71;
    } */

    .box3{
        height:519px;
        background-color: rgb(245,245, 245);
    }
    .box3 > .wrapper{
        height:519px;
        width: 1240px;
        margin:0px auto;/*居中*/
        display:flex;
        flex-direction: column;/*使head和img-box在垂直方向上排列*/
    }
    .box3 > .wrapper > .head{
        height: 114px;
        width: 1240px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box3 > .wrapper > .head h2 span{
        font-size: 16px;
        color: #999;
    }
    .box3 > .wrapper > .head a{
        color: #999;
        font-size: 16px;
        text-decoration: none;
    }
    .box3 > .wrapper > .img-box{
        height: 405px;
        width: 1240px;
    }
    .box3 > .wrapper > .img-box ul{
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box3 > .wrapper > .img-box ul li h3{
        font-size:22px;
        text-align: center;
        padding: 12px 30px 0 30px;
    }
    .box3 > .wrapper > .img-box ul li span{
        font-size:18px;
        display: flex;
        justify-content: center;
        color: #999;
        margin-top: 10px;
    }
    .box3 > .wrapper > .img-box img{
        height: 304px;
        width: 304px;
    }
    .box3 > .wrapper > .img-box li{
        position: relative;
        overflow: hidden; /* 隐藏超出容器的内容 */
        border-radius: 12px; /* 添加圆角 */
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
        /* 新增基础阴影 */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .box3 > .wrapper > .img-box li .content-wrapper {
        transition: inherit; /* 继承父级过渡效果 */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    /* 悬停时整体变形 */
    .box3 > .wrapper > .img-box li:hover {
        transform: translateY(-15px) scale(1.03); /* 整体上浮放大 */
        z-index: 2; /* 提升层级防止遮挡 */
        z-index: 2;
        /* 新增多层阴影 */
        box-shadow: 
        0 12px 25px rgba(0,0,0,0.2),
        0 8px 15px rgba(0,0,0,0.1);
    }
    /* 内容容器跟随变形 */
    .box3 > .wrapper > .img-box li:hover .content-wrapper{
        transform: translateY(-5px); /* 内容额外上移增强层次 */
    }
    /* 图片同步变化 */
    .box3 > .wrapper >.img-box li:hover img {
        transform: scale(1.08); /* 图片放大 */
        filter: brightness(1.05); /* 亮度增强 */
    }
    /* 文字颜色变化 */
    /* .box2 > .wrapper > .img-box li:hover h3 {
        color: #e74c3c;
        }
    .box2 > .wrapper > .img-box li:hover span {
        color: #2ecc71;
    } */

    .box4{
        height:519px;
        background-color: #fff;
    }
    .box4 > .wrapper{
        height:519px;
        width: 1240px;
        margin:0px auto;/*居中*/
        display:flex;
        flex-direction: column;/*使head和img-box在垂直方向上排列*/
    }
    .box4 > .wrapper > .head{
        height: 114px;
        width: 1240px;
        display: flex;
        align-items: center;
        float:left;
    }
    .box4 > .wrapper > .head h2 span{
        font-size: 16px;
        color: #999;
    }
    .box4 > .wrapper > .img-box{
        height: 405px;
        width: 1240px;
    }
    .box4 > .wrapper > .img-box ul{
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box4 > .wrapper > .img-box ul li h3{
        font-size:22px;
        text-align: center;
        padding: 12px 30px 0 30px;
    }
    .box4 > .wrapper > .img-box ul li span{
        font-size:18px;
        display: flex;
        justify-content: center;
        color: #999;
        margin-top: 10px;
    }
    .box4 > .wrapper > .img-box img{
        height: 304px;
        width: 304px;
    }
    .box4 > .wrapper > .img-box li{
        position: relative;
        overflow: hidden; /* 隐藏超出容器的内容 */
        border-radius: 12px; /* 添加圆角 */
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
        /* 新增基础阴影 */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .box4 > .wrapper > .img-box li .content-wrapper {
        transition: inherit; /* 继承父级过渡效果 */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    /* 悬停时整体变形 */
    .box4 > .wrapper > .img-box li:hover {
        transform: translateY(-15px) scale(1.03); /* 整体上浮放大 */
        z-index: 2; /* 提升层级防止遮挡 */
        z-index: 2;
        /* 新增多层阴影 */
        box-shadow: 
        0 12px 25px rgba(0,0,0,0.2),
        0 8px 15px rgba(0,0,0,0.1);
    }
    /* 内容容器跟随变形 */
    .box4 > .wrapper > .img-box li:hover .content-wrapper{
        transform: translateY(-5px); /* 内容额外上移增强层次 */
    }
    /* 图片同步变化 */
    .box4 > .wrapper >.img-box li:hover img {
        transform: scale(1.08); /* 图片放大 */
        filter: brightness(1.05); /* 亮度增强 */
    }
    /* 文字颜色变化 */
    /* .box2 > .wrapper > .img-box li:hover h3 {
        color: #e74c3c;
        }
    .box2 > .wrapper > .img-box li:hover span {
        color: #2ecc71;
    } */

    .box5{
        height:706px;
        background-color: rgb(245,245, 245);
    }
    .box5 > .wrapper{
        height:706px;
        width: 1240px;
        margin:0px auto;/*居中*/
        display:flex;
        flex-direction: column;/*使head和img-box在垂直方向上排列*/
    }
    .box5 > .wrapper > .head{
        line-height: 96px;
        height: 96px;
        width: 1240px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .box5 > .wrapper > .head ul{
        margin-right: 65px;
        list-style: none; 
        display: flex;
    }
    .box5 > .wrapper > .head a{
        padding: 0px 16px;       /* 内边距 */
        color: #333;
        font-weight: 100;
        font-size: 16px;
        text-decoration: none;
        gap:10px;
    }
    .box5 > .wrapper > .head ul li :hover {
        background-color: rgba(39, 186, 155);
    }
    .box5 > .wrapper > .img-box {
        display:flex;
    }
    .box5 > .wrapper > .img-box > .right{
        width:1000px;
        height: 610px;
        display: flex;
        flex-direction: column;
    }
    .box5 > .wrapper > .img-box p{
        font-size: 19px;
    }
    .box5 > .wrapper > .img-box span{
        display: block;
        margin-top: 10px;
        font-size: 22px;
        color:#9A2E1F;
    }
    .box5 > .wrapper > .img-box > .right > .top{
        display:flex;
        justify-content: space-between;
        height: 302px;
    }
    .box5 > .wrapper > .img-box > .right  ul{
        list-style: none;
        display: flex;
    }
    .box5 > .wrapper > .img-box > .right > .under{
        display:flex;
        justify-content: space-between;
    }
    .box5 > .wrapper > .img-box > .right  a{
        display:block;
        text-decoration: none;
        color: #333;
        padding-left: 29px;
        width: 240px;
        height: 302px;
    }
    .box5 > .wrapper > .img-box  a:hover{
        color: rgba(39, 186, 155);
    }
    .box5 > .wrapper > .img-box > .right  img{
        vertical-align: middle;
        width:184px;
        height: 184px;
    }


    .box-end1{
        height: 302px;
        display: flex;
        flex-direction: column;
    }
    .box-end1 > .service{
        width:1240px;
        margin:0 auto;
        height: 302px;
        display:flex;
        align-items: center;
        justify-content: space-around;
    }
    .box-end1 > .service h4{
        color:#999;
        height:21px;
        width: 192px;
        padding-left: 100px;
        padding-bottom: 30px;
    }
    .box-end1 > .service ul{
        list-style: none;
        display: flex;
    }
    .box-end1 > .service li{
        border: 0.01px solid #999;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        width: 100%;
        margin-right: 10px;
    }
    .box-end1 > .service a{
        text-decoration: none;
    }
    .box-end1 > .service p{
        text-align: center;
        color: #999;
    }
    .img1{
        display: block;
        width: 60px;
        height: 50px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:165px -60px;
    }
    .img2{
        display: block;
        width: 60px;
        height: 50px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:65px -60px;    
    }
    .img3{
        display: block;
        width: 60px;
        height: 50px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:160px -5px;    
    }
    .img4{
        display: block;
        width: 60px;
        height: 50px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:63px -5px;     
    }
    .img5{
        width: 82px;
        height: 72px;
    }
    .download-right{
        display: flex;
        flex-direction: column;
    }
    .phone-title{
        margin-bottom: 33px;
    }

    .box-end2{
        background-color: #333;
    }
    .box-end2 > .footer{
        background-color: #333;
        height: 340px;
        margin:0 auto;
        width:1240px;
        display: flex;
        flex-direction: column;
    }
    .box-end2 > .footer > .top{
        height: 170px;
        width:1240px;
        padding-top: 60px;
        border-bottom:1px solid #888;
    }
    .box-end2 > .footer > .top ul{
        list-style: none;
        display: flex;
        justify-content: space-around;
    }
    .box-end2 > .footer > .top li{
        color: #fff;
        font-size: 16px;
        font-weight: 100;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .img6{
        display: block;
        width: 65px;
        height: 65px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:400px 0px;  
    }
    .img7{

        display: block;
        width: 65px;
        height: 65px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:270px 0px;  
    }
    .img8{
        display: block;
        width: 60px;
        height: 65px;
        background:url(./实验2-小兔鲜儿所用图片/精灵图.PNG);
        background-position:335px 0px;  
    }

    .box-end2 > .footer > .bottom{
        height: 170px;
        width:1393px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box-end2 > .footer > .bottom ul{
        list-style: none;
        display: flex;
    }
    .box-end2 > .footer > .bottom li:not(:last-child) :after{
        content:"|";
        margin-left:5px;
        margin-right:5px;
    }
    .box-end2 > .footer > .bottom a{
        color: #fff;
        font-size: 16px;
        font-weight: 100;
        text-decoration: none;
    }